<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>基本类型图表</title>
<%@ include file="/app/includes/header.jsp"%>
<script type="text/javascript">
	/*
		需要引入highcharts.js和jquery-1.4.4.min.js文件
	*/
	/*
		线形图标,横轴坐标刻线 xAxis: {categories: []} 显示的名称也可通过代码循环取值
	*/
	function generateline() { 
		$('#container').after("<div id=\"containerLine\"></div>");
		var options = {
					chart: {
						renderTo:'containerLine',
						defaultSeriesType: 'line',
						marginRight: 130,
						marginBottom: 25
					},
					title: {
						text: '我的标题',
						x: -20 //center
					},
					subtitle: {
						text: '来源: ccut.com',
						x: -20
					},
					credits: {
						text: 'Example.com',
        				href: 'http://www.example.com',
        				enabled: true,//是否显示Highcharts.com
        				position: {
            				align: 'left',
            				x: 10
        				}
   					},
					xAxis: {
						categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 
							'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
					},
					yAxis: {
						title: {
							text: '摄氏度 (°C)'
						},
						//gridLineWidth: 10,//001墙壁的横线会变粗
						plotLines: [{
							value: 0,
							width: 1,
							color: '#808080'
						}]
					},
					tooltip: {
						formatter: function() {
				                return '<b>'+ this.series.name +'</b><br/>'+
								this.x +': '+ this.y +'摄氏度';
						}
					},
					legend: {
						layout: 'vertical',
						align: 'right',
						verticalAlign: 'top',
						x: 0,
						y: 100,
						borderWidth: 0
					},
					series:[]
				};
				
				$.ajax({  
					type: "get", 
					url: '<%=request.getContextPath()%>/highcharts/listLineDatas.action', 
					data: "iId=" + "" ,
					dataType: 'json',
					success:  function(json){
					
						for (var i = 0; i < json.rows.length; i++) {
							options.series.push(json.rows[i]);
						}
						<%--options.xAxis.categories = new Array();
				    	for (var i = 0; i < 13; i++) {
		    			 		options.xAxis.categories[i] = i + 1;
	    			 	}--%>
			    		var chart = new Highcharts.Chart(options);
					}
				});
				
		/*
		用静态数据形式产生线形图表的写法
		*/	
		<%--var chart;
			$(document).ready(function() {
				chart = new Highcharts.Chart({
					chart: {
						renderTo: 'container',
						defaultSeriesType: 'line',
						marginRight: 130,
						marginBottom: 25
					},
					title: {
						text: 'Monthly Average Temperature',
						x: -20 //center
					},
					subtitle: {
						text: 'Source: WorldClimate.com',
						x: -20
					},
					xAxis: {
						categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 
							'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
					},
					yAxis: {
						title: {
							text: 'Temperature (°C)'	
					},
						plotLines: [{
							value: 0,
							width: 1,
							color: '#808080'
						}]
					},
					tooltip: {
						formatter: function() {
				                return '<b>'+ this.series.name +'</b><br/>'+
								this.x +': '+ this.y +'°C';
						}
					},
					legend: {
						layout: 'vertical',
						align: 'right',
						verticalAlign: 'top',
						x: -10,
						y: 100,
						borderWidth: 0
					},
					series: [{name:'Tokyo',data:[7.0,6.9,9.5,14.5,18.2,21.5,25.2,26.5,23.3,18.3,13.9,9.6]}, 
								{name:'New York',data:[-0.2,0.8,5.7,11.3,17.0,22.0,24.8,24.1,20.1,14.1,8.6,2.5]}, 
								{name:'Berlin',data:[-0.9,0.6,3.5,8.4,13.5,17.0,18.6,17.9,14.3,9.0,3.9,1.0]}, 
								{name:'London',data:[3.9,4.2,5.7,8.5,11.9,15.2,17.0,16.6,14.2,10.3,6.6,4.8]}]
				});
				
				
			});--%>
	}
	
	//面积图表
	function generatearea() {
				$('#container').after("<div id=\"containerArea\"></div>");
				var options = {
					chart: {
						renderTo: 'containerArea', 
						defaultSeriesType: 'area'
					},
					title: {
						text: '美国和苏联的核储备'
					},
					subtitle: {
						text: '来源: ccut.com'
					},
					xAxis: {
						labels: {
							formatter: function() {
								return this.value; // clean, unformatted number for year
							}
						}							
					},
					yAxis: {
						title: {
							text: '核武器国家'
						},
						labels: {
							formatter: function() {
								return this.value / 1000 +'k';
							}
						}
					},
					tooltip: {
						formatter: function() {
							return this.series.name +' produced <b>'+
								Highcharts.numberFormat(this.y, 0) +'</b><br/>warheads in '+ this.x;
						}
					},
					plotOptions: {
						area: {
							pointStart: 1940,
							marker: {
								enabled: false,
								//symbol: 'circle',
								//radius: 2,
								states: {
									hover: {
										enabled: true
									}
								}
							}
						}
					},
					series:[]
				};
				
				$.ajax({  
					type: "get", 
					url: '<%=request.getContextPath()%>/highcharts/listAreaDatas.action', 
					data: "iId=" + "" ,
					dataType: 'json',
					success:  function(json){
					
						for (var i = 0; i < json.rows.length; i++) {
							options.series.push(json.rows[i]);
						}
			    		var chart = new Highcharts.Chart(options);
					}
				});
		
		/*
		用静态数据形式产生面积图表的写法
		*/		
		<%--var chart;
		chart = new Highcharts.Chart({
					chart: {
						renderTo: 'containerArea', 
						defaultSeriesType: 'area'
					},
					title: {
						text: '美国和苏联的核储备'
					},
					subtitle: {
						text: '来源: ccut.com'
					},
					xAxis: {
						labels: {
							formatter: function() {
								return this.value; // clean, unformatted number for year
							}
						}							
					},
					yAxis: {
						title: {
							text: '核武器国家'
						},
						labels: {
							formatter: function() {
								return this.value / 1000 +'k';
							}
						}
					},
					tooltip: {
						formatter: function() {
							return this.series.name +' produced <b>'+
								Highcharts.numberFormat(this.y, 0) +'</b><br/>warheads in '+ this.x;
						}
					},
					plotOptions: {
						area: {
							pointStart: 1940,
							marker: {
								enabled: false,
								//symbol: 'circle',
								//radius: 2,
								states: {
									hover: {
										enabled: true
									}
								}
							}
						}
					},
					series: [{
						name: 'USA',
						data: [null, null, null, null, null, 6 , 11, 32, 110, 235, 369, 640, 
							   1005, 1436, 2063, 3057, 4618, 6444, 9822, 15468, 20434, 24126, 
							   27387, 29459, 31056, 31982, 32040, 31233, 29224, 27342, 26662, 
							   26956, 27912, 28999, 28965, 27826, 25579, 25722, 24826, 24605, 
							   24304, 23464, 23708, 24099, 24357, 24237, 24401, 24344, 23586, 
							   22380, 21004, 17287, 14747, 13076, 12555, 12144, 11009, 10950, 
							   10871, 10824, 10577, 10527, 10475, 10421, 10358, 10295, 10104 ]
					}, {
						name: 'USSR/Russia',
						data: [null, null, null, null, null, null, null , null , null ,null, 
						5, 25, 50, 120, 150, 200, 426, 660, 869, 1060, 1605, 2471, 3322, 
						4238, 5221, 6129, 7089, 8339, 9399, 10538, 11643, 13092, 14478, 
						15915, 17385, 19055, 21205, 23044, 25393, 27935, 30062, 32049, 
						33952, 35804, 37431, 39197, 45000, 43000, 41000, 39000, 37000, 
						35000, 33000, 31000, 29000, 27000, 25000, 24000, 23000, 22000, 
						21000, 20000, 19000, 18000, 18000, 17000, 16000]
					}]
				});--%>
	}	
	
	//柱状图表
	function generatebar() {
	$('#container').after("<div id=\"containerBar\"></div>");
			var options = {
					chart: {
						renderTo: 'containerBar',
						defaultSeriesType: 'bar'
					},
					title: {
						text: '区域划分世界人口'
					},
					subtitle: {
						text: '来源: Wikipedia.org'
					},
					xAxis: {
						categories: ['Africa', 'America', 'Asia', 'Europe', 'Oceania'],
						title: {
							text: null
						}
					},
					yAxis: {
						min: 0,
						title: {
							text: '人口 (百万)',
							align: 'high'
						}
					},
					tooltip: {
						formatter: function() {
							return ''+
								 this.series.name +': '+ this.y +' 百万';
						}
					},
					plotOptions: {
						bar: {
							dataLabels: {
								enabled: true
							}
						}
					},
					legend: {
						layout: 'vertical',
						align: 'right',
						verticalAlign: 'top',
						x: -100,
						y: 100,
						floating: true,
						borderWidth: 1,
						backgroundColor: '#FFFFFF',
						shadow: true
					},
					credits: {
						enabled: false
					},
				        series: []
				};
				
				$.ajax({  
					type: "get", 
					url: '<%=request.getContextPath()%>/highcharts/listBarDatas.action', 
					data: "iId=" + "" ,
					dataType: 'json',
					success:  function(json){
					
						for (var i = 0; i < json.rows.length; i++) {
							options.series.push(json.rows[i]);
						}
			    		var chart = new Highcharts.Chart(options);
					}
				});
				
			/*
			用静态数据形式产生柱状图表的写法
			*/
			<%--var chart = new Highcharts.Chart({
					chart: {
						renderTo: 'containerBar',
						defaultSeriesType: 'bar'
					},
					title: {
						text: '区域划分世界人口'
					},
					subtitle: {
						text: '来源: Wikipedia.org'
					},
					xAxis: {
						categories: ['Africa', 'America', 'Asia', 'Europe', 'Oceania'],
						title: {
							text: null
						}
					},
					yAxis: {
						min: 0,
						title: {
							text: '人口 (百万)',
							align: 'high'
						}
					},
					tooltip: {
						formatter: function() {
							return ''+
								 this.series.name +': '+ this.y +' 百万';
						}
					},
					plotOptions: {
						bar: {
							dataLabels: {
								enabled: true
							}
						}
					},
					legend: {
						layout: 'vertical',
						align: 'right',
						verticalAlign: 'top',
						x: -100,
						y: 100,
						floating: true,
						borderWidth: 1,
						backgroundColor: '#FFFFFF',
						shadow: true
					},
					credits: {
						enabled: false
					},
				        series: [{
						name: 'Year 1800',
						data: [107, 31, 635, 203, 2]
					}, {
						name: 'Year 1900',
						data: [133, 156, 947, 408, 6]
					}, {
						name: 'Year 2008',
						data: [973, 914, 4054, 732, 34]
					}]
				});--%>
				
	}
	
	//饼图
	function generatepie() {
	$('#container').after("<div id=\"containerPie\"></div>");
	       	var chart;
			var options = {
				chart: {
						renderTo: 'containerPie',
						plotBackgroundColor: null,
						plotBorderWidth: null,
						plotShadow: false,
						defaultSeriesType: 'pie'
					},
					title: {
						text: '某一特定网站浏览器的占有率, 2010'
					},
					tooltip: {
						formatter: function() {
							return '<b>'+ this.point.name +'</b>: '+ this.y +' %';
						}
					},
					plotOptions: {
						pie: {
							allowPointSelect: true,
							cursor: 'pointer',
							dataLabels: {
								enabled: true,
								color: '#000000',
								connectorColor: '#000000',
								formatter: function() {
									return '<b>'+ this.point.name +'</b>: '+ this.y +' %';
								}
							}
						}
					},
				    series: []
			};
			
			$.ajax({  
					type: "get", 
					url: '<%=request.getContextPath()%>/highcharts/listPieDatas.action', 
					data: "iId=" + "" ,
					dataType: 'json',
					success:  function(json){
					
						for (var i = 0; i < json.rows.length; i++) {
							options.series.push(json.rows[i]);
						}
			    		var chart = new Highcharts.Chart(options);
			    		$('#button').click(function() {
			   				chart.series[0].data[0].slice(); 
			   				chart.series[0].data[0].selected = true;
						});
					}
				});
			
			
			/*
			用静态数据形式产生面积图表的写法
			*/
			<%--var chart = new Highcharts.Chart({
					chart: {
						renderTo: 'containerPie',
						plotBackgroundColor: null,
						plotBorderWidth: null,
						plotShadow: false
					},
					title: {
						text: '某一特定网站浏览器的占有率, 2010'
					},
					tooltip: {
						formatter: function() {
							return '<b>'+ this.point.name +'</b>: '+ this.y +' %';
						}
					},
					plotOptions: {
						pie: {
							allowPointSelect: true,
							cursor: 'pointer',
							dataLabels: {
								enabled: true,
								color: '#000000',
								connectorColor: '#000000',
								formatter: function() {
									return '<b>'+ this.point.name +'</b>: '+ this.y +' %';
								}
							}
						}
					},
				    series: [{
						type: 'pie',
						name: '浏览器占有率',
						data: [
							['Firefox',45.0],
							['IE',26.8],
							{
								name: 'Chrome',    
								y: 12.8,
								sliced: true
								selected: true
							},
							['Safari',8.5],
							['Opera',6.2],
							['Others',0.7]
						]
					}]
				});--%>
	}
				
	//根据横轴（当前时间）和纵轴（随机数据）持续生成线图
	function dynamicupdate() {
			$('#container').after("<div id=\"containerDynamic\"></div>");
		var chart;
		chart = new Highcharts.Chart({
					chart: {
						renderTo: 'containerDynamic',
						defaultSeriesType: 'spline',
						marginRight: 10,
						events: {
							load: function() {
				
								// set up the updating of the chart each second
								var series = this.series[0];
								setInterval(function() {
									var x = (new Date()).getTime(), // 当前时间
										y = Math.random();
									series.addPoint([x, y], true, true);
								}, 1000);
							}
						}
					},
					title: {
						text: '动态随机数据'
					},
					xAxis: {
						type: 'datetime',
						tickPixelInterval: 150
					},
					yAxis: {
						title: {
							text: 'Value'
						},
						plotLines: [{
							value: 0,
							width: 1,
							color: '#808080'
						}]
					},
					tooltip: {
						formatter: function() {
				                return '<b>'+ this.series.name +'</b><br/>'+
								Highcharts.dateFormat('%Y-%m-%d %H:%M:%S', this.x) +'<br/>'+ 
								Highcharts.numberFormat(this.y, 2);
						}
					},
					legend: {
						enabled: false
					},
					exporting: {
						enabled: false
					},
					series: [{
						name: 'Random data',
						data: (function() {
							// generate an array of random data
							var data = [],
								time = (new Date()).getTime(),
								i;
							for (i = -19; i <= 0; i++) {
								data.push({
									x: time + i * 1000,
									y: Math.random()
								});
							}
							return data;
						})()
					}]
				});

	}
	
	//结合column,spline,pie图标
	function combination() {
		$('#container').after("<div id=\"containerCombination\"></div>");
		var chart;
		var options = {
					chart: {
						renderTo: 'containerCombination'
					},
					title: {
						text: '组合图表'
					},
					xAxis: {
						categories: ['Apples', 'Oranges', 'Pears', 'Bananas', 'Plums']
					},
					tooltip: {
						formatter: function() {
							var s;
							if (this.point.name) { // the pie chart
								s = ''+
									this.point.name +': '+ this.y +' fruits';
							} else {
								s = ''+
									this.x  +': '+ this.y;
							}
							return s;
						}
					},
					labels: {
						items: [{
							html: '总水果消费',
							style: {
								left: '40px',
								top: '8px',
								color: 'black'				
							}
						}]
					},
					series: []
				};
				
				
				$.ajax({  
					type: "get", 
					url: '<%=request.getContextPath()%>/highcharts/listCombinationDatas.action', 
					data: "iId=" + "" ,
					dataType: 'json',
					success:  function(json){
					
						for (var i = 0; i < json.rows.length; i++) {
							options.series.push(json.rows[i]);
						}
			    		var chart = new Highcharts.Chart(options);
			    		
						//要想显示pie图标，必须将chart = new Highcharts.Chart(options);放在get方法里边
					}
				});
				
		/*
		用静态数据形式结合三种（column,spline,pie）图表的写法
		*/			
		<%--var chart;
		chart = new Highcharts.Chart({
					chart: {
						renderTo: 'containerCombination'
					},
					title: {
						text: '组合图表'
					},
					xAxis: {
						categories: ['Apples', 'Oranges', 'Pears', 'Bananas', 'Plums']
					},
					tooltip: {
						formatter: function() {
							var s;
							if (this.point.name) { // the pie chart
								s = ''+
									this.point.name +': '+ this.y +' fruits';
							} else {
								s = ''+
									this.x  +': '+ this.y;
							}
							return s;
						}
					},
					labels: {
						items: [{
							html: '总水果消费',
							style: {
								left: '40px',
								top: '8px',
								color: 'black'				
							}
						}]
					},
					series: [{
						type: 'column',
						name: 'Jane',
						data: [3, 2, 1, 3, 4]
					}, {
						type: 'column',
						name: 'John',
						data: [2, 3, 5, 7, 6]
					}, {
						type: 'column',
						name: 'Joe',
						data: [4, 3, 3, 9, 0]
					}, {
						type: 'spline',
						name: 'Average',
						data: [3, 2.67, 3, 6.33, 3.33]
					}, {
						type: 'pie',
						name: 'Total consumption',
						data: [{
							name: 'Jane',
							y: 13,
							color: '#4572A7' // Jane's color
						}, {
							name: 'John',
							y: 23,
							color: '#AA4643' // John's color
						}, {
							name: 'Joe',
							y: 19,
							color: '#89A54E' // Joe's color
						}],
						center: [100, 80],
						size: 100,
						showInLegend: false,
						dataLabels: {
							enabled: false
						}
					}]
				});--%>
				
	}
	
	function delLine() {
	
	  $('#containerLine').remove();
	}
	
	function delArea() {
	  
		$('#containerArea').remove();
	}
	function delBar() {
	  
		$('#containerBar').remove();
	}
	function delPie() {
	  
		$('#containerPie').remove();
	}
	function delDynamic() {
	  
		$('#containerDynamic').remove();
	}
	function delCombination() {
		$('#containerCombination').remove();
	}
	
	</script>
</head>
<body>
<button id="linechart" onclick="generateline()">LineChartBasic</button><a href="#" onclick="delLine()">删除</a><br>
<button id="areachart" onclick="generatearea()">AreaChartBasic</button><a href="#" onclick="delArea()">删除</a><br>
<button id="barchart" onclick="generatebar()">BarChartBasic</button><a href="#" onclick="delBar()">删除</a><br>
<button id="piechart" onclick="generatepie()">PieChartBasic</button><button id="button">Slice</button><a href="#" onclick="delPie()">删除</a><br>
<button id="updatechart" onclick="dynamicupdate()">DynamicUpdate</button><a href="#" onclick="delDynamic()">删除</a><br>
<button id="combinationchart" onclick="combination()">CombinationChart</button><a href="#" onclick="delCombination()">删除</a><br>
<div id="container"></div>
</body>
</html>